<template>
	<view class="inviteFriends-wrapper wrapperLayer">
		<titleBar :titleText='"邀请好友"' :pageForm='"inviteFriends"'></titleBar>
		<view class="swiper-container">
			<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
				<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]"
				 :data-direction="direction">
					<view class="swiper-item">
						<image :src="item.imgUrl" mode="aspectFill"></image>
						<view class="code rowCenCen">
							<image :src="codeSrc" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pagebottom-container pd30 colCen">
			<!-- <view class="inviteCode-container pd30 rowCenBet">
				<view class="left-code">
					我的邀请码：{{userInfo.inviteCode}}
				</view>
				<view class="clipbtn rowCenCen" @tap="clipcode()">
					<view>复制</view>
				</view>
			</view> -->

			<!-- <view class="invite-step colCen">
				<view class="step-title">
					邀请步骤
				</view>
				<view class="step-list">
					1. 将邀请码或海报分享给好友</br>
					⒉ 好友注册时填写您的邀请码</br>
					3. 好友即可0元购买改商品</br>
					未来他/她有购物订单,您可获得佣金奖励,并自动计入您的帐户
				</view>
			</view> -->

			<view class="bottom-options-container rowCenAro">
				<view class="option-items-container colCen" @tap='copyLink()'>
					<image class="icon-box" src="../../static/images/mine/link.png" mode="aspectFill"></image>
					<view class="option-name">
						分享链接
					</view>
					<view class="option-explain">
						一键授权
					</view>
				</view>
				<view class="option-items-container colCen" @tap='showModel()'>
					<image class="icon-box" src="../../static/images/mine/pic.png" mode="aspectFill"></image>
					<view class="option-name">
						分享海报
					</view>
					<view class="option-explain">
						强力锁粉
					</view>
				</view>
				<!-- <view class="option-items-container colCen" @tap="goodsnew()">
					<image class="icon-box" src="../../static/images/mine/code.png" mode="aspectFill"></image>
					<view class="option-name">
						商品拉新
					</view>
					<view class="option-explain">
						助力社群
					</view>
				</view> -->
			</view>
		</view>


		<u-popup v-model="shareShow" mode="bottom" border-radius="14" height="auto">
			<view class="share-container colCen">
				<view class="share-title rowCenCen">
					<view class="title-text">
						分享到
					</view>
				</view>
				<view class="shareList rowCen">
					<view class="items-container colCen" @tap='sharewx()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/mine/wxshare.png" mode=""></image>
						</view>
						<view class="modeName">
							微信好友
						</view>
					</view>
					<view class="items-container colCen" @tap='sharepyq()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/mine/sharefriend.png" mode=""></image>
						</view>
						<view class="modeName">
							朋友圈
						</view>
					</view>
					<view class="items-container colCen" @tap='shareqq()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/mine/shareqq.png" mode=""></image>
						</view>
						<view class="modeName">
							QQ
						</view>
					</view>
					<view class="items-container colCen" @tap='savepic()'>
						<view class="icon-box defIcon">
							<image src="../../static/images/app/saveimg.png" mode=""></image>
						</view>
						<view class="modeName">
							保存相册
						</view>
					</view>
				</view>

				<view class="cancelbox rowCenCen" @click="closeModel()">
					<view class="canceltext">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<canvas canvas-id="qrcode" class="canvass" style="width: 260rpx;height: 260rpx;opacity: 0;" />
		<canvas canvas-id="sharePoster" class="canvass" :style="{ width: canvasInfo.canvasW + 'px', height: canvasInfo.canvasH + 'px'}" />
	</view>
</template>

<script>
	import util from '../../utils/utils.js' 
	import uQRCode from '../../utils/qrcode.js'
	let qrcode
	export default {
		data() {
			return {
				code: '',
				codeSrc: '',
				direction: '',
				userInfo: '',
				swiperList: [],

				shareShow: false,
				bannerUrl: '',

				CVS: null,
				canvasInfo: {
					canvasW: 750,
					canvasH: 1334,
				},
				shareUrl: ''
			}
		},
		onLoad() {
			this.getpageInfo()
			this.userInfo = util.getCacheSync('userData')
			this.makeCode()
		},
		methods: {
			showModel() {
				this.$nextTick(()=>{
					this.getbanner()
				})
			},
			closeModel() {
				this.shareShow = false
			},

			async getbanner() {
				uni.showLoading()
				let goodsPic = await this.getImageInfo(this.bannerUrl) //广告图
				console.log(goodsPic);
				this.CVS = uni.createCanvasContext('sharePoster', this);
				this.canvasInfo.canvasW = 750
				this.canvasInfo.canvasH = 1334
				this.CVS.setFillStyle('white'); //canvas背景颜色
				this.CVS.fillRect(0, 0, 750, 1334); //canvas画布大小 

				this.CVS.drawImage(goodsPic.path, 0, 0, 750, 1334);
				this.CVS.drawImage(this.codeSrc, 259, 1034, 232, 232);
				
				this.CVS.setFontSize(28); //设置标题字体大小
				this.CVS.setFillStyle('#ffffff'); //设置标题文本颜色
				
				this.CVS.setTextAlign('center')
				//this.CVS.fillText('邀请码：' + this.userInfo.inviteCode, 374, 1296) 
				this.CVS.draw(false, res => {
					console.log(res);
					uni.canvasToTempFilePath({
						canvasId: 'sharePoster',
						success: ress => {
							uni.hideLoading()
							this.shareShow = true
							this.shareUrl = ress.tempFilePath
						}
					});
				});
			},

			async getImageInfo(imgSrc) {
				return new Promise((resolve, errs) => {
					uni.getImageInfo({
						src: imgSrc,
						success: image => {
							resolve(image);
						},
						fail: err => {
							errs(err);
							uni.hideLoading()
						}
					});
				});
			},

			async makeCode() {
				var txt = getApp().globalData.appinfo.appAndroidDownUrl
				// #ifdef APP-PLUS
				txt = plus.os.name == 'Android' ? getApp().globalData.appinfo.appAndroidDownUrl : getApp().globalData.appinfo.appIosDownUrl, // 生成内容
					// #endif
					qrcode = new uQRCode({
						context: this, // 上下文环境
						canvasId: 'qrcode', // canvas-id
						usingComponents: false, // 是否是自定义组件
						loadingText: '', // loading文字
						text: txt, // 生成内容
						size: uni.upx2px(260), // 二维码大小
						cbResult: res => { // 生成二维码的回调
							console.log(res);
							this.codeSrc = res
						},
					});
			},
			copyLink() {
				// #ifdef APP-PLUS
				var txtdata
				if (plus.os.name == 'Android') {
					txtdata = getApp().globalData.appinfo.appName + '的下载链接为：' + getApp().globalData.appinfo.appAndroidDownUrl
				} else {
					txtdata = getApp().globalData.appinfo.appName + '的下载链接为：' + getApp().globalData.appinfo.appIosDownUrl
				}
				uni.setClipboardData({
					data: txtdata,
					success: res => {
						uni.showToast({
							title: '邀请链接已复制~快去分享给好友吧！',
							icon: 'none'
						})
						uni.setStorageSync('clipboard', txtdata);
					}
				});
				// #endif
			},
			
			// clipcode(){
			// 	uni.setClipboardData({
			// 		data: this.userInfo.inviteCode,
			// 		success: res => {
			// 			console.log(res)
			// 			uni.showToast({
			// 				title: '邀请码已复制~快去分享给好友吧！',
			// 				icon: 'none'
			// 			})
			// 			uni.setStorageSync('clipboard', this.userInfo.inviteCode);
			// 		}
			// 	});
			// },

			goodsnew() {
				uni.navigateTo({
					url: './pullNew'
				})
			},

			getpageInfo() {
				this.$http.get('cpssystemConfig/getImgList', {
					type: 1
				}).then(res => {
					console.log(res);
					this.swiperList = res
					this.TowerSwiper('swiperList');
				})
			},


			sharewx() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 2,
					imageUrl: this.shareUrl,
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			
			sharepyq() {
				uni.share({
				    provider: "weixin",
				    scene: "WXSenceTimeline",
				    type: 2,
				    imageUrl: this.shareUrl,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			
			shareqq(){
				uni.share({
				    provider: "qq",
				    type: 2,
				    imageUrl: this.shareUrl,
				    success: function (res) {
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
			},
			
			savepic(){
				uni.saveImageToPhotosAlbum({
					filePath: this.shareUrl,
					success: res => {
						uni.showToast({
							title:'保存相册成功~',
							icon:'none'
						})
						this.closeModel()
					},
					fail(err) {
						console.log(err);
					},
				});
			},
			


			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
				this.swiperList.forEach((items, index) => {
					if (items.mLeft == 0) {
						this.bannerUrl = items.imgUrl
					}
				})
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},

			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList.forEach((items, index) => {
					if (items.mLeft == 0) {
						this.bannerUrl = items.imgUrl
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.inviteFriends-wrapper {
		width: 100%;

		.swiper-container {
			width: 100%;
			height: 665rpx;

			.tower-swiper {
				height: 100%;

				.tower-item {
					width: 374rpx;
					height: 100%;

					.swiper-item {
						position: relative;

						.code {
							position: absolute;
							width: 100%;
							bottom: 44rpx;

							image {
								width: 106rpx;
								height: 106rpx;
								z-index: 10;
							}
						}
					}
				}
			}
		}

		.pagebottom-container {
			width: 100%;
			margin-bottom: 260rpx;

			.inviteCode-container {
				width: 100%;
				height: 86rpx;
				background: #FFFFFF;
				border-radius: 16rpx;

				.left-code {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}

				.clipbtn {
					width: 122rpx;
					height: 52rpx;
					background: linear-gradient(0deg, #7A11F2, #D31BF7);
					border-radius: 26rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.invite-step {
				width: 100%;
				margin-top: 30rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;
				padding: 30rpx;

				.step-title {
					width: 100%;
				}

				.step-list {
					font-size: 24rpx;
					font-weight: 500;
					color: #666666;
					line-height: 38rpx;
					margin-top: 25rpx;
				}
			}

			.bottom-options-container {
				width: 100%;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 20rpx 0;
				position: fixed;
				bottom: 0;

				.option-items-container {
					.icon-box {
						width: 96rpx;
						height: 96rpx;
					}

					.option-name {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
					}

					.option-explain {
						font-size: 22rpx;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.65 + var(--index) / 10));
		margin-left: calc(var(--left) * 430upx - 184upx);
		z-index: var(--index);
	}

	.share-container {
		width: 100%;

		.share-title {
			width: 100%;
			height: 90rpx;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #EFF1F7;

			.title-text {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		.shareList {
			width: 100%;
			flex-wrap: wrap;
			border-bottom: 1rpx solid #EFF1F7;
			margin-top: 45rpx;

			.items-container {
				width: 25%;
				margin-bottom: 30rpx;

				.icon-box {
					width: 95rpx;
					height: 95rpx;
				}

				.modeName {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					margin-top: 15rpx;
				}
			}
		}

		.cancelbox {
			width: 100%;
			height: 90rpx;

			.canceltext {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
			}
		}
	}

	.canvass {
		opacity: 0;
		position: fixed; 
		pointer-events: none;
		bottom: 0;
		left: 0;
	}
</style>
